<!DOCTYPE html>
<html lang="en">
<head>
<title>huangliusong</title>
<script src="./vue.js"></script>
</head>
 
<body>
	<div id="root">
		<child content="dell"></child>
		<child content="lee"></child>
	</div>

	<script type="text/javascript">
	Vue.prototype.bus=new Vue()

	Vue.component('child',{
		data:function(){
			return{
				selfContent:this.content
			}
		},
		props:['content'],
		template:'<div @click="handlerClick">{{selfContent}}</div>',
		methods:{
			handlerClick:function(){
				this.bus.$emit('change',this.selfContent)
			}
		},
		mounted:function(){
			var this_=this
			this.bus.$on('change',function(msg){
				this_.selfContent=msg
			})
		}
	})
	var vm=new Vue({
		el:"#root"
	})
	</script>
</body>

</html>
